<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>

    #ballDiv{ 
      height:400px; background-color:#333333;
      } 
      #ball{ 
        width:100px; height:100px; border-radius:50%; 
        background:-webkit-radial-gradient(center center,circle,#fff,blue); box-shadow:3px 7px 8px #ccc; -webkit-animation:ball 5s cubic-bezier(0.0,0.25,0.50,1.0); -webkit-transform:translate(250px, 300px);} @-webkit-keyframes ball { 　　0%{-webkit-transform:translate(0, 0);} 　　10%{-webkit-transform:translate(0, 330px); height:70px;} 　　20%{-webkit-transform:translate(50px, 50px); height:100px;} 　　30%{-webkit-transform:translate(50px, 330px); height:70px;} 　　40%{-webkit-transform:translate(100px, 100px); height:100px;} 　　50%{-webkit-transform:translate(100px, 320px); height:80px;} 　　60%{-webkit-transform:translate(150px, 150px); height:100px;} 　　70%{-webkit-transform:translate(150px, 320px); height:80px;} 　　80%{-webkit-transform:translate(200px, 200px); height:100px;} 　　90%{-webkit-transform:translate(200px, 300px); height:100px;} 　　100%{-webkit-transform:translate(250px, 300px); height:100px;} }
  </style>
</head>
<body>
  <div id="ballDiv"> 
    <div id="ball"></div> 
  </div>
</body>
</html>